<!--
 * @Description  : 上传
 * @Author       : zhao
 * @Date         : 2022-07-26 11:34:54
 * @LastEditors  : zhao
 * @LastEditTime : 2023-01-31 17:20:02
-->
<template>
    <div class='Upload'>

        <el-button type="primary" size="default" :loading="loading" @click="setClearable('File')">上传</el-button>
        <input type="file" style="display: none" ref="File" @change="(checked) => handleClick(checked, 'File')" />
        <el-dialog v-model="dialogVisible" title="上传数据" width="60%" :before-close="handleClose">
            <el-descriptions title="" border>
                <el-descriptions-item label="档案号">
                    <p v-on:dblclick="doubleclick" v-if="hideSn">{{ xmldata.archives[0].sn }}</p>
                    <el-input v-on:dblclick="doubleclick" v-else v-model="xmldata.archives[0].sn"
                        placeholder="请输入档案号" />
                </el-descriptions-item>
                <el-descriptions-item label="档案名称">{{ xmldata.archives[0].title }}</el-descriptions-item>
                <el-descriptions-item label="形成时间">{{ xmldata.archives[0].formDate }}</el-descriptions-item>
                <el-descriptions-item label="形成单位">{{ xmldata.archives[0].formInstitution }}</el-descriptions-item>
                <el-descriptions-item label="资料类别">{{ xmldata.archives[0].category }}</el-descriptions-item>
                <el-descriptions-item label="工作程度">{{ xmldata.archives[0].workDegree }}</el-descriptions-item>


            </el-descriptions>
            <el-table :data="xmldata.archiveFiles" height="250" style="width: 100%">
                <el-table-column prop="fileSn" label="文件号" />
                <el-table-column prop="fileTitle" label="文件题名" />
                <el-table-column prop="fileCategory" label="文件类型" />

                <el-table-column prop="fileInstitution" label="形成单位" />
                <el-table-column prop="fileAuthor" label="形成人" />
                <el-table-column prop="fileDate" label="形成时间" />
            </el-table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="onSubmit()">确认</el-button>
                </span>
            </template>
        </el-dialog>

    </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUpdataMaintain } from '/@/stores/updataMaintain'
import { useTableInfo } from '/@/stores/ztable'

const { getTableData } = useTableInfo()
const File = ref();

const loading = ref(false)
const useUpdataMaintains = useUpdataMaintain()
let xmldata = reactive<any>({
    archives: {},
    archiveFiles: [],
})
//获取 选择的文件
const handleClick = async (e: any, prop: any) => {
    const files = e.target.files[0]
    if (files) {

        let type = files.name.split(".")[1]
        loading.value = true
        if (type == "xls" || type == "xlsx") {
            const formdata = new FormData()
            formdata.append("XlsFile", files)
            const res = await useUpdataMaintains.ImportXlsFile(formdata)
            try {
                if (res.code == 200) await getTableData()

            } catch {
                loading.value = false
            }

        } else if (type == "mdb") {
            const formdata = new FormData()
            formdata.append("MdbFile", files)
            const res = await useUpdataMaintains.importMdbFile(formdata)
            try {
                if (res.code == 200) await getTableData()

            } catch {
                loading.value = false
            }

        } else if (type == "xml") {
            const formdata = new FormData()
            formdata.append("XmlFile", files)
            await useUpdataMaintains.LoadXmlFile(formdata).then(res => {
                if (res.code == 200) {
                    xmldata.archiveFiles = res.data.archiveFiles
                    xmldata.archives = res.data.archives
                    dialogVisible.value = true
                }


            }).finally(() => {
                loading.value = false
            })
        } else {
            ElMessage.error("请选择.xls、.xml或.mdb文件")
        }


        loading.value = false
        File.value.value = ""

    }




}
const setClearable = (val: any) => { File.value.click() }


//对话框
const dialogVisible = ref(false)
let hideSn = ref(true);
const handleClose = (done: () => void) => {
    ElMessageBox({
        title: '关闭上传',
        message: '关闭将终止上传，请确认',
        showCancelButton: true,
        cancelButtonText: '取消',
        confirmButtonText: '确认',
    })
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}


const doubleclick = (val: any) => {

    hideSn.value = !hideSn.value
}
const onSubmit = async () => {
    const res = await useUpdataMaintains.UpdateArchiveDataList(xmldata)
    if (res.code == 200) getTableData()
    dialogVisible.value = false
}
</script>
<style lang='scss' scoped>
::v-deep(.el-message__content) {

    max-height: 300px;
    overflow-y: scroll;
}
</style>